
<template>
  <div class="mine">
    <MyHead title="个人中心" :noBack="true"></MyHead>
    <div class="mine-top">
      <div class="user-info" v-if="userInfo">
        <img class="avatar" :src="pic" alt="" />
        <h2 class="name mt10">{{ userInfo.user_id }}</h2>
        <h3 class="phone mt10">{{ userInfo.mobile }}</h3>
      </div>
      <div class="nologin" v-else>
        <van-button
          @click="gotopage('/login')"
          round
          block
          type="primary"
          class="tada1"
          >去登录</van-button
        >
      </div>
    </div>
    <div class="cell">
      <van-cell-group>
        <div v-if="userInfo">
          <van-cell title="我的订单" icon="orders-o" value="2" is-link />
          <van-cell title="我的地址" icon="location-o" is-link to="/address" />
        </div>
        <van-cell title="历史记录" icon="records-o" value="88" is-link />
        <van-cell title="通知" icon="volume-o" value="3" is-link />
        <van-cell title="公告" icon="cluster-o" value="2" is-link />
        <van-cell
          title="清除缓存"
          icon="share-o"
          @click="clearCache"
          is-link
          :value="cache + 'M'"
        />
        <van-cell title="设置" icon="setting-o" is-link />
      </van-cell-group>

      <div class="quit" v-if="userInfo">
        <van-button type="default" block @click="todoLogoutAction"
          >退出登录</van-button
        >
      </div>
    </div>
    <van-overlay :show="show">
      <div class="mask" v-if="show">
        <Dao
          :time="Math.ceil(cache / 100)"
          :onFinish="onFinish"
          :mstyle="{ top: 0, left: 0, position: 'relative' }"
          :swidth="60"
          size="160px"
        ></Dao>
      </div>
    </van-overlay>
  </div>
</template>

<script setup lang="ts">
import { onMounted, toRefs, ref } from "vue";
import { useUserStore } from "../../store/user";
import { useCommon } from "../../hooks/common";
import pic from "../../assets/images/Pikachu.jpg";
import { showConfirmDialog } from "vant";
import { ShowMsg } from "../../utils/message";
const cache = ref(0);
const show = ref(false);
const { gotopage } = useCommon();
const userStore = useUserStore();
const { userInfo } = toRefs(userStore) as any;
const { getuserInfoAsync, clearUserInfo } = userStore;
const clearCache = () => {
  if (cache.value == 0) {
    ShowMsg("暂无缓存数据");
  } else {
    show.value = true;
  }
};
const onFinish = () => {
  cache.value = 0;
  localStorage.removeItem("appCache");
  show.value = false;
  ShowMsg("成功清除缓存");
};

onMounted(() => {
  getuserInfoAsync();
  cache.value =
    (localStorage.getItem("appCache")
      ? localStorage.getItem('appCache') * 1
      : 0) + Math.floor(Math.random() * 100);
  localStorage.setItem("appCache", cache.value);
});
const todoLogoutAction = () => {
  showConfirmDialog({
    title: "提示",
    message: "你真的要退出登录吗",
  })
    .then(() => {
      clearUserInfo();
      ShowMsg("注销成功");
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
.mask {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mine {
  width: 100%;
  min-height: calc(100vh - 50px);
  background: #f4f4f4;
  .quit {
    padding: 16px;
  }
  &-top {
    width: 100%;
    height: 240px;
    padding: 15px;
    background: url(../../assets/images/mine.gif) 0 0 no-repeat;
    background-size: 100% 100%;
    .user-info {
      text-align: center;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: #fff;
      font-size: 24px;
      .avatar {
        width: 70px;
        height: 70px;
        border-radius: 50%;
      }
      .phone {
        font-size: 20px;
      }
    }
    .nologin {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 80px;
    }
  }
}
</style>
